<template>
  <!-- 通知中心 -->
  <el-drawer
    v-model="noticeShow"
    modal-class="notice"
    modal="false"
    title="通知中心"
    :direction="'rtl'"
    :before-close="drawBeforeClose">
    <span>Hi, there!</span>
  </el-drawer>
</template>
<script>
import { computed, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import {useRouter} from 'vue-router'

export default {
  setup() {
    const store = useStore()
    const router = useRouter()
    const noticeShow = ref(false)

    watch(()=>store.state.taskbar.noticeShow,()=>{
      noticeShow.value = store.state.taskbar.noticeShow
    })

    const drawBeforeClose= ()=>{
      store.dispatch('taskbar/changeNoticeShow',false)
    }

    return {
      noticeShow,
      drawBeforeClose
    };
  }
}
</script>